/* Reset default margins and padding */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Main container styling */
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

  /* 调整地图区域位置，避免被头部遮挡 */
  .map-area {
    margin-top: 0px; /* 与头部高度一致 */
    width: 100%;
    height: calc(100vh - 0px); /* 减去头部高度，占满剩余屏幕 */
    overflow: hidden; /* 隐藏溢出，防止可视越界 */
  }

  /* 地图容器需要相对定位，作为标记点的定位基准 */
.map-container {
    position: relative; /* 确保标记点相对于地图定位 */
    transform-origin: top left; /* 固定变换原点，便于边界计算 */
  }
  
  /* 标记点样式 */
  .marker-btn {
    position: absolute; /* 相对于地图容器定位 */
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* 移除默认按钮样式 */
    outline: none;
  }
  
  /* 定位图标样式 */
  .location-icon {
    width: 30px; /* 根据需要调整大小 */
    height: 30px;
  }
  
  /* 为两个标记点设置具体位置*/
  .marker-btn[data-parkid="1"] {
    top: 47.5%; /* 距离地图顶部30% */
    left: 40%; /* 距离地图左侧40% */
  }
  
  .marker-btn[data-parkid="2"] {
    top: 59.5%; /* 距离地图顶部60% */
    left: 19%; /* 距离地图左侧70% */
  }

/* 添加动画关键帧 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* 初始和结束位置 */
  }
  50% {
    transform: translateY(-10px); /* 中间位置（向上移动10px） */
  }
}

/* 应用动画到定位图标 */
.location-icon {
  width: 30px;
  height: 30px;
  animation: bounce 1.5s infinite; /* 1.5秒为一个周期，无限循环 */
}
